<template>
  <div class="operator_problem_solve">
    <!--处理明细-->
    <processing-detail ref="ProcessingDetail"></processing-detail>
    <!--操作记录-->
    <log-detail ref="logDetail"></log-detail>
    <one-title title="问题处理工作台" @refreshData="refresh">
      <div class="mes_btn">
        <el-tooltip
          effect="dark"
          :content="cancelBtnStatus.content"
          :disabled="!cancelBtnStatus.status"
          popper-class="btn_tooltip"
          placement="bottom">
          <el-button
            v-btn-permission="'cancel'"
            @click="handleCancel" :class="{'is-disabled':cancelBtnStatus.status}">
            <i class="iconfont icon-btn_return"></i>
            撤销
          </el-button>
        </el-tooltip>
      </div>
    </one-title>
    <div class="fixed_top_56">
      <mes-search-comp
        ref="mesSearch"
        :searchList="tableColConfig"
        :searchResult="searchCount"
        @searchInfo="_info">
      </mes-search-comp>
      <div class="table_container">
        <el-table
          :data="listData.list"
          ref="tableNode"
          v-loading="isLoading"
          :max-height="tableMaxHeight"
          :row-class-name="({row}) => !selectItems.some((item) => item.id === row.id) || 'line_selected'"
          @row-click="row => $refs.tableNode.toggleRowSelection(row)"
          @sort-change="handleSortChange"
          @selection-change="handleSelectionChange"
          @filter-change="handleFilterChange"
          border
          stripe
          tooltip-effect="dark">
          <el-table-column
            width="40"
            type="selection"
            align="center">
          </el-table-column>
          <mes-col-comp
            :key="index"
            v-for="(column, index) in columnList"
            :column="column">
          </mes-col-comp>
          <el-table-column
            label="操作"
            fixed="right"
            :resizable="false"
            show-overflow-tooltip
            align="center"
            min-width="160">
            <template slot-scope="scope">
              <span class="jump_item" @click="handleProcessingDetail(scope.row)">处理明细</span>
              <span class="jump_item" @click="handleViewLog(scope.row)">操作记录</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <mes-pagination
        @updateData="init"
        :currentPage="listData.pageNo"
        :total="listData.count || 0"
        :pageSize="listData.pageSize">
      </mes-pagination>
    </div>
  </div>
</template>

<script>
import computed from './tableColumns'
import {ViewLog} from '../solverProblemSolve/components/index'
import ProcessingDetail from '../solverProblemSolve/components/ProcessingDetail'

export default {
  name: 'OperatorProblemSolve',
  components: {
    ViewLog,
    ProcessingDetail
  },
  data() {
    return {
      isLoading: false, // 数据加载中
      searchData: {}, // 查询参数
      sortData: {}, // 排序对象
      searchCount: NaN, // 搜索结果数
      selectItems: [], // 选中的数据,
      dialogViewLog: false,
    }
  },
  mounted() {
    this.init()
  },
  computed: computed,
  methods: {
    // 列筛选回调
    handleFilterChange(filters) {
      let filterParams = this.$filterParams(this.tableColConfig, filters)
      Object.assign(this.searchData, filterParams.search)
      this.sortData = filterParams.order // 排序对象
      this.$refs.tableNode.clearSort()
      this.init()
    },
    // 初始化方法
    init(page) {
      this.isLoading = true
      let postData = {
        method: 'post',
        url: 'a/workstageproblemprocess/workstageProblemProcess/list',
        module: 'problemProcess',
        data: {
          pageNo: page ? page.pageNo : 1,
          pageSize: page ? page.pageSize : this.listData.pageSize || 15,
          sort: this.sortData,
          query: {
            viewSource: 1
          }
        },
        state: 'listData'
      }
      if (Object.keys(this.searchData).length > 0) {
        postData.data.query = this.searchData
        postData.data.query.viewSource = 1
      }
      if (Object.keys(this.sortData).length > 0) {
        postData.data.sort = this.sortData
      }
      this.$store.dispatch('saveData', postData).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 查询
    _info(data) {
      this.searchData = data
      this.$refs.tableNode.clearSort()
      this.sortData = {}
      this.$refs.tableNode.clearFilter()
      this.init()
    },
    // 排序方法
    handleSortChange(e) {
      this.sortData = this.$getSortOrder(e)
      this.init()
    },
    // 刷新方法
    refresh() {
      this.searchData = {} // 查询参数
      this.sortData = {} // 排序对象
      this.$refs.mesSearch.clean()
      this.$refs.tableNode.clearSort()
      this.$refs.tableNode.clearFilter()
      this.selectItems = []
      this.init()
    },
    // 选中方法
    handleSelectionChange(val) {
      this.selectItems = val
    },
    // 处理明细
    handleProcessingDetail(row) {
      this.$refs.ProcessingDetail.openDialog(row)
    },
    // 操作记录
    handleViewLog(row) {
      this.$refs.logDetail.openDialog({
        title: '周转码',
        name: row.turnoverNumber,
        url: 'a/turnoverstatuschangehistory/turnoverStatusChangeHistory/list',
        query: {
          turnoverBatchId: row.turnoverId
        }
      })
    },
    // getIds() {
    //   let arr = []
    //   this.selectItems.map(value => {
    //     arr.push(value.id)
    //   })
    //   // this.selectItems.reduce((pre, cur) => [...pre, cur.id], [])
    //   return arr
    // },
    // 撤销
    handleCancel() {
      if (!this.selectItems.length) {
        this.tipMessage('error', '请选择一条数据')
        return
      }
      if (this.cancelBtnStatus.status) return
      this.mesConfirm('选中的记录将被撤销, 是否继续?', '撤销提示').then(() => {
        let postData = {
          method: 'post',
          url: 'a/workstageproblemprocess/workstageProblemProcess/cancelProblemProcess',
          data: {
            problemIds: this.selectItems.reduce((pre, cur) => [...pre, cur.id], [])
          },
          noCommit: true
        }
        this.$store.dispatch('saveData', postData).then(() => {
          this.tipMessage('success', '撤销成功')
          this.dialogVisible = false
          this.init(this.listData)
        })
      })
      // }
    },
    /**
     * 提示
     * @param str 提示内容
     */
    tipMessage(type, str) {
      this.$message({
        type: type,
        message: str,
        duration: 1500,
        center: true
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .operator_problem_solve {
    .operation {
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
</style>
